| Conditions | 34 |
| Total Lines | 375 |
| Code Lines | 242 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like script.js ➔ createMap often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | /* |
||
| 71 | function createMap(mapOpts, poi) { |
||
| 72 | |||
| 73 | // const mapOpts = olMapData[0].mapOpts; |
||
| 74 | // const poi = olMapData[0].poi; |
||
| 75 | |||
| 76 | if (!olEnable) { |
||
|
|
|||
| 77 | return; |
||
| 78 | } |
||
| 79 | if (!olTestCSSsupport()) { |
||
| 80 | olEnable = false; |
||
| 81 | return; |
||
| 82 | } |
||
| 83 | |||
| 84 | // find map element location |
||
| 85 | var cleartag = document.getElementById(mapOpts.id + '-clearer'); |
||
| 86 | if (cleartag === null) { |
||
| 87 | return; |
||
| 88 | } |
||
| 89 | // create map element and add to document |
||
| 90 | var fragment = olCreateMaptag(mapOpts.id, mapOpts.width, mapOpts.height); |
||
| 91 | cleartag.parentNode.insertBefore(fragment, cleartag); |
||
| 92 | |||
| 93 | /** dynamic map extent. */ |
||
| 94 | let extent = ol.extent.createEmpty(); |
||
| 95 | overlayGroup = new ol.layer.Group({title: 'Overlays', fold: 'open', layers: []}); |
||
| 96 | const baseLyrGroup = new ol.layer.Group({'title': 'Base maps', layers: []}); |
||
| 97 | |||
| 98 | const map = new ol.Map({ |
||
| 99 | target: document.getElementById(mapOpts.id), |
||
| 100 | layers: [baseLyrGroup, overlayGroup], |
||
| 101 | view: new ol.View({ |
||
| 102 | center: ol.proj.transform([mapOpts.lon, mapOpts.lat], 'EPSG:4326', 'EPSG:3857'), |
||
| 103 | zoom: mapOpts.zoom, |
||
| 104 | projection: 'EPSG:3857' |
||
| 105 | }), |
||
| 106 | controls: [new ol.control.Zoom()] |
||
| 107 | }); |
||
| 108 | |||
| 109 | if (osmEnable) { |
||
| 110 | baseLyrGroup.getLayers().push( |
||
| 111 | new ol.layer.Tile({ |
||
| 112 | visible: true, |
||
| 113 | title: 'OSM', |
||
| 114 | type: 'base', |
||
| 115 | source: new ol.source.OSM() |
||
| 116 | })); |
||
| 117 | |||
| 118 | baseLyrGroup.getLayers().push( |
||
| 119 | new ol.layer.Tile({ |
||
| 120 | visible: mapOpts.baselyr === "cycle map", |
||
| 121 | title: 'cycle map', |
||
| 122 | type: 'base', |
||
| 123 | source: new ol.source.OSM({ |
||
| 124 | url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=' + tfApiKey, |
||
| 125 | attributions: 'Data ©ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, ' |
||
| 126 | + 'Tiles ©<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>' |
||
| 127 | + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>' |
||
| 128 | }) |
||
| 129 | })); |
||
| 130 | |||
| 131 | baseLyrGroup.getLayers().push( |
||
| 132 | new ol.layer.Tile({ |
||
| 133 | visible: mapOpts.baselyr === "transport", |
||
| 134 | title: 'transport', |
||
| 135 | type: 'base', |
||
| 136 | source: new ol.source.OSM({ |
||
| 137 | url: 'https://{a-c}.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=' + tfApiKey, |
||
| 138 | attributions: 'Data ©ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, ' |
||
| 139 | + 'Tiles ©<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>' |
||
| 140 | + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>' |
||
| 141 | }) |
||
| 142 | })); |
||
| 143 | |||
| 144 | baseLyrGroup.getLayers().push( |
||
| 145 | new ol.layer.Tile({ |
||
| 146 | visible: mapOpts.baselyr === "landscape", |
||
| 147 | title: 'landscape', |
||
| 148 | type: 'base', |
||
| 149 | source: new ol.source.OSM({ |
||
| 150 | url: 'https://{a-c}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=' + tfApiKey, |
||
| 151 | attributions: 'Data ©ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, ' |
||
| 152 | + 'Tiles ©<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>' |
||
| 153 | + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>' |
||
| 154 | }) |
||
| 155 | })); |
||
| 156 | |||
| 157 | baseLyrGroup.getLayers().push( |
||
| 158 | new ol.layer.Tile({ |
||
| 159 | visible: mapOpts.baselyr === "outdoors", |
||
| 160 | title: 'outdoors', |
||
| 161 | type: 'base', |
||
| 162 | source: new ol.source.OSM({ |
||
| 163 | url: 'https://{a-c}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=' + tfApiKey, |
||
| 164 | attributions: 'Data ©ODbL <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, ' |
||
| 165 | + 'Tiles ©<a href="https://www.thunderforest.com/" target="_blank">Thunderforest</a>' |
||
| 166 | + '<img src="https://www.thunderforest.com/favicon.ico" alt="Thunderforest logo"/>' |
||
| 167 | }) |
||
| 168 | })); |
||
| 169 | } |
||
| 170 | |||
| 171 | if (bEnable && bApiKey !== '') { |
||
| 172 | baseLyrGroup.getLayers().push( |
||
| 173 | new ol.layer.Tile({ |
||
| 174 | visible: mapOpts.baselyr === "bing road", |
||
| 175 | title: 'bing road', |
||
| 176 | type: 'base', |
||
| 177 | source: new ol.source.BingMaps({ |
||
| 178 | key: bApiKey, |
||
| 179 | imagerySet: 'Road' |
||
| 180 | }) |
||
| 181 | })); |
||
| 182 | |||
| 183 | baseLyrGroup.getLayers().push( |
||
| 184 | new ol.layer.Tile({ |
||
| 185 | visible: mapOpts.baselyr === "bing sat", |
||
| 186 | title: 'bing sat', |
||
| 187 | type: 'base', |
||
| 188 | source: new ol.source.BingMaps({ |
||
| 189 | key: bApiKey, |
||
| 190 | imagerySet: 'Aerial' |
||
| 191 | }) |
||
| 192 | })); |
||
| 193 | |||
| 194 | baseLyrGroup.getLayers().push( |
||
| 195 | new ol.layer.Tile({ |
||
| 196 | visible: mapOpts.baselyr === "bing hybrid", |
||
| 197 | title: 'bing hybrid', |
||
| 198 | type: 'base', |
||
| 199 | source: new ol.source.BingMaps({ |
||
| 200 | key: bApiKey, |
||
| 201 | imagerySet: 'AerialWithLabels' |
||
| 202 | }) |
||
| 203 | })); |
||
| 204 | } |
||
| 205 | |||
| 206 | if (stamenEnable) { |
||
| 207 | baseLyrGroup.getLayers().push( |
||
| 208 | new ol.layer.Tile({ |
||
| 209 | visible: false, |
||
| 210 | type: 'base', |
||
| 211 | title: 'toner', |
||
| 212 | source: new ol.source.Stamen({layer: 'toner'}) |
||
| 213 | }) |
||
| 214 | ); |
||
| 215 | baseLyrGroup.getLayers().push( |
||
| 216 | new ol.layer.Tile({ |
||
| 217 | visible: false, |
||
| 218 | type: 'base', |
||
| 219 | title: 'terrain', |
||
| 220 | source: new ol.source.Stamen({layer: 'terrain'}) |
||
| 221 | }) |
||
| 222 | ); |
||
| 223 | } |
||
| 224 | |||
| 225 | extent = ol.extent.extend(extent, map.getView().calculateExtent()); |
||
| 226 | |||
| 227 | const iconScale = 1.0; |
||
| 228 | const vectorSource = new ol.source.Vector(); |
||
| 229 | poi.forEach((p) => { |
||
| 230 | const f = new ol.Feature({ |
||
| 231 | geometry: new ol.geom.Point(ol.proj.fromLonLat([p.lon, p.lat])), |
||
| 232 | description: p.txt, |
||
| 233 | img: p.img, |
||
| 234 | rowId: p.rowId, |
||
| 235 | lat: p.lat, |
||
| 236 | lon: p.lon, |
||
| 237 | angle: p.angle, |
||
| 238 | alt: p.img.substring(0, p.img.lastIndexOf(".")) |
||
| 239 | }); |
||
| 240 | f.setId(p.rowId); |
||
| 241 | f.setStyle(new ol.style.Style({ |
||
| 242 | text: new ol.style.Text({ |
||
| 243 | text: "" + p.rowId, |
||
| 244 | textAlign: 'left', |
||
| 245 | textBaseline: 'bottom', |
||
| 246 | offsetX: 8, |
||
| 247 | offsetY: -8, |
||
| 248 | scale: iconScale, |
||
| 249 | fill: new ol.style.Fill({color: 'rgb(0,0,0)'}), |
||
| 250 | font: '12px monospace bold', |
||
| 251 | backgroundFill: new ol.style.Fill({color: 'rgba(255,255,255,.4)'}) |
||
| 252 | }), image: new ol.style.Icon({ |
||
| 253 | src: DOKU_BASE + "lib/plugins/openlayersmap/icons/" + p.img, |
||
| 254 | crossOrigin: '', |
||
| 255 | opacity: p.opacity, |
||
| 256 | scale: iconScale, |
||
| 257 | rotation: p.angle * Math.PI / 180, |
||
| 258 | }), |
||
| 259 | })); |
||
| 260 | vectorSource.addFeature(f); |
||
| 261 | }); |
||
| 262 | |||
| 263 | const vectorLayer = new ol.layer.Vector({title: 'POI', visible: true, source: vectorSource}); |
||
| 264 | overlayGroup.getLayers().push(vectorLayer); |
||
| 265 | if (mapOpts.autozoom) { |
||
| 266 | extent = ol.extent.extend(extent, vectorSource.getExtent()); |
||
| 267 | map.getView().fit(extent); |
||
| 268 | } |
||
| 269 | |||
| 270 | map.addControl(new ol.control.ScaleLine({bar: true, text: true})); |
||
| 271 | map.addControl(new ol.control.MousePosition({ |
||
| 272 | coordinateFormat: ol.coordinate.createStringXY(4), projection: 'EPSG:4326', |
||
| 273 | })); |
||
| 274 | map.addControl(new ol.control.FullScreen({label: '✈'})); |
||
| 275 | map.addControl(new ol.control.OverviewMap({ |
||
| 276 | label: '+', |
||
| 277 | layers: [new ol.layer.Tile({ |
||
| 278 | source: new ol.source.OSM() |
||
| 279 | })] |
||
| 280 | })); |
||
| 281 | map.addControl(new ol.control.LayerSwitcher({ |
||
| 282 | activationMode: 'click', |
||
| 283 | label: '\u2630', |
||
| 284 | collapseLabel: '\u00BB', |
||
| 285 | })); |
||
| 286 | map.addControl(new ol.control.Attribution({ |
||
| 287 | collapsible: true, |
||
| 288 | collapsed: true |
||
| 289 | })); |
||
| 290 | |||
| 291 | if (mapOpts.kmlfile.length > 0) { |
||
| 292 | try { |
||
| 293 | const kmlSource = new ol.source.Vector({ |
||
| 294 | url: DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.kmlfile, |
||
| 295 | format: new ol.format.KML(), |
||
| 296 | }); |
||
| 297 | overlayGroup.getLayers().push(new ol.layer.Vector({title: 'KML file', visible: true, source: kmlSource})); |
||
| 298 | |||
| 299 | if (mapOpts.autozoom) { |
||
| 300 | kmlSource.once('change', function () { |
||
| 301 | extent = ol.extent.extend(extent, kmlSource.getExtent()); |
||
| 302 | map.getView().fit(extent); |
||
| 303 | }); |
||
| 304 | } |
||
| 305 | } catch (e) { |
||
| 306 | console.error(e); |
||
| 307 | } |
||
| 308 | } |
||
| 309 | |||
| 310 | if (mapOpts.geojsonfile.length > 0) { |
||
| 311 | try { |
||
| 312 | const geoJsonSource = new ol.source.Vector({ |
||
| 313 | url: DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.geojsonfile, |
||
| 314 | format: new ol.format.GeoJSON(), |
||
| 315 | }); |
||
| 316 | overlayGroup.getLayers().push(new ol.layer.Vector({ |
||
| 317 | title: 'GeoJSON file', visible: true, source: geoJsonSource, |
||
| 318 | // TODO |
||
| 319 | // style: { |
||
| 320 | // strokeColor: "#FF00FF", |
||
| 321 | // strokeWidth: 3, |
||
| 322 | // strokeOpacity: 0.7, |
||
| 323 | // pointRadius: 4, |
||
| 324 | // fillColor: "#FF99FF", |
||
| 325 | // fillOpacity: 0.7 |
||
| 326 | // } |
||
| 327 | })); |
||
| 328 | |||
| 329 | if (mapOpts.autozoom) { |
||
| 330 | geoJsonSource.once('change', function () { |
||
| 331 | extent = ol.extent.extend(extent, geoJsonSource.getExtent()); |
||
| 332 | map.getView().fit(extent); |
||
| 333 | }); |
||
| 334 | } |
||
| 335 | } catch (e) { |
||
| 336 | console.error(e); |
||
| 337 | } |
||
| 338 | } |
||
| 339 | |||
| 340 | if (mapOpts.gpxfile.length > 0) { |
||
| 341 | try { |
||
| 342 | const gpxSource = new ol.source.Vector({ |
||
| 343 | url: DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.gpxfile, |
||
| 344 | format: new ol.format.GPX(), |
||
| 345 | }); |
||
| 346 | overlayGroup.getLayers().push(new ol.layer.Vector({ |
||
| 347 | title: 'GPS track', visible: true, source: gpxSource, |
||
| 348 | // TODO |
||
| 349 | // style: { |
||
| 350 | // strokeColor: "#0000FF", |
||
| 351 | // strokeWidth: 3, |
||
| 352 | // strokeOpacity: 0.7, |
||
| 353 | // pointRadius: 4, |
||
| 354 | // fillColor: "#0099FF", |
||
| 355 | // fillOpacity: 0.7 |
||
| 356 | // } |
||
| 357 | })); |
||
| 358 | |||
| 359 | if (mapOpts.autozoom) { |
||
| 360 | gpxSource.once('change', function () { |
||
| 361 | extent = ol.extent.extend(extent, gpxSource.getExtent()); |
||
| 362 | map.getView().fit(extent); |
||
| 363 | }); |
||
| 364 | } |
||
| 365 | } catch (e) { |
||
| 366 | console.error(e); |
||
| 367 | } |
||
| 368 | } |
||
| 369 | |||
| 370 | const container = document.getElementById('popup'); |
||
| 371 | const content = document.getElementById('popup-content'); |
||
| 372 | const closer = document.getElementById('popup-closer'); |
||
| 373 | |||
| 374 | const overlay = new ol.Overlay({ |
||
| 375 | element: container, autoPan: true, autoPanAnimation: { |
||
| 376 | duration: 250, |
||
| 377 | }, //stopEvent: false, |
||
| 378 | }); |
||
| 379 | map.addOverlay(overlay); |
||
| 380 | |||
| 381 | /** |
||
| 382 | * Add a click handler to hide the popup. |
||
| 383 | * @return {boolean} Don't follow the href. |
||
| 384 | */ |
||
| 385 | closer.onclick = function () { |
||
| 386 | overlay.setPosition(undefined); |
||
| 387 | closer.blur(); |
||
| 388 | return false; |
||
| 389 | }; |
||
| 390 | |||
| 391 | // display popup on click |
||
| 392 | map.on('singleclick', function (evt) { |
||
| 393 | const selFeature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { |
||
| 394 | return feature; |
||
| 395 | }); |
||
| 396 | if (selFeature) { |
||
| 397 | overlay.setPosition(evt.coordinate); |
||
| 398 | |||
| 399 | let pContent = '<div class="spacer"> </div>'; |
||
| 400 | let locDesc = ''; |
||
| 401 | |||
| 402 | if (selFeature.get('rowId') !== undefined) { |
||
| 403 | pContent += '<span class="rowId">' + selFeature.get('rowId') + ': </span>'; |
||
| 404 | } |
||
| 405 | if (selFeature.get('name') !== undefined) { |
||
| 406 | pContent += '<span class="txt">' + selFeature.get('name') + '</span>'; |
||
| 407 | locDesc = selFeature.get('name'); |
||
| 408 | // TODO strip <p> tag from locDesc |
||
| 409 | // locDesc = selFeature.get('name').split(/\s+/).slice(0,2).join('+'); |
||
| 410 | } |
||
| 411 | if (selFeature.get('ele') !== undefined) { |
||
| 412 | pContent += '<div class="ele">elevation: ' + selFeature.get('ele') + '</div>'; |
||
| 413 | } |
||
| 414 | if (selFeature.get('type') !== undefined) { |
||
| 415 | pContent += '<div>' + selFeature.get('type') + '</div>'; |
||
| 416 | } |
||
| 417 | if (selFeature.get('time') !== undefined) { |
||
| 418 | pContent += '<div class="time">time: ' + selFeature.get('time') + '</div>'; |
||
| 419 | } |
||
| 420 | if (selFeature.get('description') !== undefined) { |
||
| 421 | pContent += '<div class="desc">' + selFeature.get('description') + '</div>'; |
||
| 422 | } |
||
| 423 | if (selFeature.get('img') !== undefined) { |
||
| 424 | pContent += '<div class="coord" title="lat;lon">' + |
||
| 425 | '<img alt="" src="' + DOKU_BASE + 'lib/plugins/openlayersmap/icons/' + selFeature.get('img') + |
||
| 426 | '" width="16" height="16" ' + 'style="transform:rotate(' + selFeature.get('angle') + 'deg)" /> ' + |
||
| 427 | '<a href="geo:' + selFeature.get('lat') + ',' + selFeature.get('lon') + '?q=' + selFeature.get('lat') + |
||
| 428 | ',' + selFeature.get('lon') + '(' + selFeature.get('alt') + ')" title="Open in navigation app">' + |
||
| 429 | ol.coordinate.format([selFeature.get('lon'), selFeature.get('lat')], '{x}º; {y}º', 4) + '</a></div>'; |
||
| 430 | } |
||
| 431 | content.innerHTML = pContent; |
||
| 432 | } else { |
||
| 433 | // do nothing... |
||
| 434 | } |
||
| 435 | }); |
||
| 436 | |||
| 437 | // change mouse cursor when over marker |
||
| 438 | map.on('pointermove', function (e) { |
||
| 439 | const pixel = map.getEventPixel(e.originalEvent); |
||
| 440 | const hit = map.hasFeatureAtPixel(pixel); |
||
| 441 | map.getTarget().style.cursor = hit ? 'pointer' : ''; |
||
| 442 | }); |
||
| 443 | |||
| 444 | return map; |
||
| 445 | } |
||
| 446 | |||
| 671 |